<template>
  <div>
    <div class="img">
      <img src="@/assets/1.png" alt="" />
    </div>
    <div class="login-num">
      <p class="input-container">
        <label class="area-box">
          <span class="area_code">+86</span>
          <i class="area_icon"></i>
        </label>
        <input type="text" v-model="username" placeholder="请输入手机号" class="first-input" />
      </p>
      <p class="input-container">
        <input type="text" v-model="userpass" placeholder="请输入密码" class="acc-input" />
      </p>
    </div>
    <!-- <div class="btn"><router-link to="HotBooks"><button @click="loginCheck">登录</button></router-link></div> -->
    <div class="btn"><router-link to="/My"><button>登录</button></router-link></div>
    <Back1/>
  </div>
</template>
<script>
import axios from "axios";
import Back1 from "../components/Back1.vue";
export default {
  name: "Login",
  components:{
    Back1
  }
  // data() {
  //   return{
  //     username: "111",
  //     userpass: "222"
  //   }
  // },
  // methods: {
  //   loginCheck(){
  //       let str = {
  //         username:this.username,
  //         userpass:this.userpass
  //       }
  //        axios({
  //         url: "/loginCheck",
  //         method:"post",
  //         data:str
  //       }).then(res=>{
         
  //         if(res.data.status == "success"){
  //           //登录成功保存token
  //           localStorage.setItem("token",res.data.token);
  //           alert("登录成功");
  //         }
  //       }).catch(err=>{
  //         console.log("出错了",err);
  //       });
  //   }
  // }
};
</script>

<style scoped>
.img {
  width: 100%;
  margin: 0 auto;
}
.img > img {
  width: 100%;
  margin: 0.1rem 0;
}
.login-num {
  width: 90%;
  height: 0.8rem;
  margin: 0 auto;
}
.input-container {
  left: 0.1rem;
  position: relative;
  box-sizing: border-box;
  height: 0.4rem;
  padding-top: 0.05rem;
  padding-bottom: 0.1rem;
  overflow: hidden;
  background: #fff;
  border-bottom: 0.01rem solid #efefef;
}
.input-container .first-input {
  padding-top: 0.05rem;
  padding-left: 0.1rem;
}
.acc-input {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  padding-left: 0.33rem;
}
.text {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
}
span {
  font-size: 0.13rem;
}
.col {
  display: inline-block;
  color: #45b29d;
}
.btn {
  width: 90%;
  margin: 0 auto;
}
button {
  color: #fff;
  background-color: #19c3a9;
  border: none;
  width: 100%;
  padding: 0.1rem 0;
  border-radius: 0.2rem;
  margin: 0.2rem 0;
}
.text2 {
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.18rem;
}
.text > input {
  vertical-align: middle;
}
a {
  color: black;
}
</style>